<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="p"></p>
    <select id="year-select">
    </select>

    <select id="month-select">
    </select>

    <select id="day-select">
    </select>

    <select id="hour-select">
    </select>

    <select id="minite-select">
    </select>

    <select id="second-select">
    </select>

    <p id="result-wrapper">现在距离 2001年1月1日星期X HH:MM:SS 还有 X 天 X 小时 X 分 X 秒</p>
    <script>
        function getYearOption() {
            addOption('year-select', 2000, 2032);
        }

        function getMonthOption() {
            addOption('month-select', 1, 12);
        }
        var month = document.getElementById('month-select');
        var year = document.getElementById('year-select');
        var day = document.getElementById('day-select');
        var hour = document.getElementById('hour-select');
        var second = document.getElementById('second-select');
        var minite = document.getElementById('minite-select');

        function getDayOption(localmonth = month.value, localyear = year.value) {
            if (localmonth === '2') {
                if (checkYear(localyear)) {
                    return addOption('day-select', 1, 29)
                } else {
                    return addOption('day-select', 1, 28)
                }
            }
            let arr31 = ['1', '3', '5', '7', '8', '10', '12']
            if (arr31.indexOf(localmonth) !== -1) {
                return addOption('day-select', 1, 31);
            } else {
                return addOption('day-select', 1, 30);
            }
        }

        function getHourOption() {
            addOption('hour-select', 0, 23, 'zero');
        }

        function getMinuteOption() {
            addOption('minite-select', 0, 59);
        }

        function getSecondOption() {
            addOption('second-select', 0, 59);
        }

        function checkYear(year) {
            if (year % 4 === 0 && year % 100 != 0) {
                return true;
            } else if (year % 400 === 0) {
                return true;
            } else {
                return false;
            }
        }
        year.onchange = function() {
            getDayOption();
            show();
        }
        month.onchange = function() {
            getDayOption();
            show();
        }
        day.onchange = function() {
            show();
        }
        hour.onchange = function() {
            show();
        }
        minite.onchange = function() {
            show();
        }
        second.onchange = function() {
            show();
        }

        function addOption(tagName, start, end, type = 'noZero') {
            if (type === 'noZero') {
                let selectTag = document.getElementById(tagName);
                for (let i = start; i <= end; i++) {
                    let option = document.createElement('option');
                    option.innerHTML = i;
                    option.value = i;
                    selectTag.appendChild(option);
                }
            } else if (type === 'zero') {
                let selectTag = document.getElementById(tagName);
                for (let i = start; i <= end; i++) {
                    let option = document.createElement('option');
                    option.innerHTML = addZero(i);
                    option.value = i;
                    selectTag.appendChild(option);
                }
            }

        }

        function getOptions() {
            getMonthOption();
            getYearOption();
            getDayOption();
            getHourOption();
            getMinuteOption();
            getSecondOption();
        }
        getOptions();

        function getWeekDay(year, month, day) {
            var day = new Date(year + '-' + month + '-' + day).getDay();
            return transDay(day);
        }

        function show() {
            var result = document.getElementById('result-wrapper');
            let now = new Date();
            let date = new Date(` ${year.value}-${month.value}-${day.value} ${addZero(hour.value)}:${addZero(minite.value)}:${addZero(second.value)}`);
            // console.log(date);
            let delta = now.getTime() - date.getTime();
            // console.log(delta)
            deltaAbs = Math.abs(delta);
            let delDay = Math.floor(deltaAbs / 1000 / 60 / 60 / 24);
            let delHour = Math.floor((deltaAbs - delDay * 24 * 60 * 60 * 1000) / (1000 * 60 * 60));
            let delMinute = Math.floor((deltaAbs - delDay * 24 * 60 * 60 * 1000 - delHour * 60 * 60 * 1000) / (1000 * 60));
            let delSecond = Math.floor((deltaAbs - delDay * 24 * 60 * 60 * 1000 - delHour * 60 * 60 * 1000 - delMinute * 1000 * 60) / 1000);
            if (delta > 0) {
                result.innerHTML = `现在距离 ${year.value}年${month.value}月${day.value}日${getWeekDay(year.value,month.value,day.value)}
                ${addZero(hour.value)}:${addZero(minite.value)}:${addZero(second.value)} 
                已经过去了 ${delDay} 天 ${delHour} 小时 ${delMinute} 分 ${delSecond} 秒`;
            } else {
                result.innerHTML = `现在距离 ${year.value}年${month.value}月${day.value}日${getWeekDay(year.value,month.value,day.value)}
                ${addZero(hour.value)}:${addZero(minite.value)}:${addZero(second.value)} 
                还有 ${delDay} 天 ${delHour} 小时 ${delMinute} 分 ${delSecond+1} 秒`;
            }
        }
        show();

        setInterval(function() {
            show();
        }, 1000)

        function Go() {
            console.log("Go");
        }

        function GoSteps(n = 1) {
            n = Math.floor(n);
            for (let i = 0; i < n; i++) {
                Go();
            }
        }

        function showDate(type = 1) {
            var now = new Date();
            if (type === 1) {
                document.getElementById('p').innerHTML = now.getFullYear() + '年' + addZero(now.getMonth() + 1) + '月' + addZero(now.getDate()) + '日' +
                    transDay(now.getDay()) + ' ' + addZero(now.getHours()) + ':' + addZero(now.getMinutes()) + ':' + addZero(now.getSeconds());
            } else if (type === 2) {
                document.getElementById('p').innerHTML = now.getFullYear() + '-' + addZero(now.getMonth() + 1) + '-' + addZero(now.getDate()) + ' ' +
                    transDay(now.getDay(), 'english') + ' ' + addZero(now.getHours()) + ':' + addZero(now.getMinutes()) + ':' + addZero(now.getSeconds()) + ' ' + getM(now.getHours());
            }

        }
        setInterval(function() {
            showDate(2);
        }, 1000);

        function getM(hour) {
            if (hour > 0 && hour < 12) {
                return 'AM';
            } else {
                return 'PM';
            }
        }
        getM();

        function addZero(num) {
            if (num < 10) {
                num = '0' + num;
            }
            return '' + num;
        }

        function transDay(n, type = 'chinese') {
            if (type === 'chinese') {
                switch (n) {
                    case 1:
                        return '星期一';
                        break;
                    case 2:
                        return '星期二';
                        break;
                    case 3:
                        return '星期三';
                        break;
                    case 4:
                        return '星期四';
                        break;
                    case 5:
                        return '星期五';
                        break;
                    case 6:
                        return '星期六';
                        break;
                    case 7:
                        return '星期天';
                        break;
                }
            } else if (type === 'english') {
                switch (n) {
                    case 1:
                        return 'Monday';
                        break;
                    case 2:
                        return 'Tuesday';
                        break;
                    case 3:
                        return 'Thursday';
                        break;
                    case 4:
                        return 'Wedsday';
                        break;
                    case 5:
                        return 'Friday';
                        break;
                    case 6:
                        return 'Saturday';
                        break;
                    case 7:
                        return 'Sunday';
                        break;
                }
            }
        }

        // GoSteps(10); // Go 10次
        // GoSteps(1); // Go 1次
        // GoSteps(); // Go 1次，认为缺少参数时，默认参数为1
        // GoSteps(0); // 0次
        // GoSteps(-1); // 0次
        // GoSteps(1.4); // Go 1次
        // GoSteps(1.6); // Go 1次
        // GoSteps(-1); // 0次
        // GoSteps(true); // Go 1次
        // GoSteps(false); // 0次
        // GoSteps("Test"); // 0次
        // GoSteps(NaN); // 0次
        // GoSteps(null); // 0次
    </script>
</body>

</html>